

let BaseView = require('../BaseView');

let templateDiv = `
        <div class="title">轨道信息</div>
        <button id="btn_add_item">添加一组点</button>
        当前轨道长度:<span id="chainLength">0</span> 
    `;

let BkpItemModel = require('./BkpItemModel');
let BkpItemView = require('./BkpItemView');
let UIConstants = require('../ui_constants');
let settings = require('./../../settings');

// let doubleBind = require('../../doubleBind');

class BkpView extends BaseView{
    constructor(){
        super();

        // setup rootEl
        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('chain');
        this.rootEl.classList.add('border');

        // add template
        this.rootEl.innerHTML = templateDiv;

        let btnAdd = this.rootEl.querySelector('#btn_add_item');
        btnAdd.addEventListener('click',()=>{
            this.addBkpItem(0,0);
        },false);

        this.lbLen = this.rootEl.querySelector('#chainLength');

        // 存放所有的 itemView
        // 不分 chain, 所有的cache
        this.lstVms = [];

        // this.bChainLocked = false;
        // let chainLockerEl = this.rootEl.querySelector('#chainLocker');
        // chainLockerEl.addEventListener('change',()=>{
        //     this.bChainLocked = chainLockerEl.checked;
        // },false);

        this.bindModel();
        this.reset();
   }

    bindModel(){
        // let lst = [];
        // lst.push({
        //     el:this.rootEl.querySelector('#chainLocker'),
        //     name:'chainLocked',
        //     domName:'checkbox',
        //     bNumber:false,
        // });
        //
        // this.model = {};
        // lst.forEach(item=>{
        //     doubleBind(this.model,item);
        // });
    }

    reset(){
       // this.model.chainLocked = false;
    }

   // isChainLocked(){
   //      return this.model.chainLocked;
   // }

    addBkpItem(beginIdx = 0,endIdx = 0,bkpType = UIConstants.BkpItemType.Collision){
        let mapScene = editor.gameApp;
        let curChain = mapScene.curChain;
        if(!curChain){
            settings.alert('curChain is null!');
            return;
        }

        let totalLen = curChain.getTotalLen();
        if(totalLen < 50){
            settings.alert('轨道总长度太短');
            return;
        }

        let itemModel = new BkpItemModel(totalLen);
        itemModel.beginIdx = beginIdx;
        itemModel.endIdx = endIdx;
        itemModel.bkpType = bkpType;

        let itemView = new BkpItemView();

        this.lstVms.push({
            model:itemModel,
            view:itemView
        });
        this.addView(itemView);
        itemView.updateByModel(itemModel);

        // 同时 chain里面也要包含 model
        // curChain.addBkpModel
        curChain.onAddBkpItem(itemModel);
    }

    getItemModeByView(itemView){
        for(let i = 0,len = this.lstVms.length; i < len; ++i){
            if(this.lstVms[i].view === itemView){
                return this.lstVms[i].model;
            }
        }
        return  null;
    }

    removeItemByView(itemView){
        for(let i = 0,len = this.lstVms.length; i < len; ++i){
            if(this.lstVms[i].view === itemView){
                this.lstVms.splice(i,1);
                return;
            }
        }
    }

    updateChainLen(newLen){
        this.lbLen.textContent = newLen;
    }

    updateBeginIdx(itemView,newAddValue){
        // 获取当对应的model?
        let itemModel = this.getItemModeByView(itemView);
        itemModel.beginIdx = myTools.clamp(itemModel.beginIdx + newAddValue,0,itemModel.totalLen - 1);
        // console.log('itemModel:',itemModel);

        // 还要更新ui
        itemView.start.setCurIdx(itemModel.beginIdx);

        editor.gameApp.curChain.onUpdateBkp(itemModel);
    }

    updateEndIdx(itemView,newAddValue){
        let itemModel = this.getItemModeByView(itemView);
        itemModel.endIdx = myTools.clamp(itemModel.endIdx + newAddValue,0,itemModel.totalLen - 1);
        itemView.end.setCurIdx(itemModel.endIdx);
        editor.gameApp.curChain.onUpdateBkp(itemModel);
    }

    changeBeginIdx(itemView,newIdx){
        let itemModel = this.getItemModeByView(itemView);
        itemModel.beginIdx = myTools.clamp(newIdx,0,itemModel.totalLen - 1);
        editor.gameApp.curChain.onUpdateBkp(itemModel);
    }

    changeEndIdx(itemView,newIdx){
        let itemModel = this.getItemModeByView(itemView);
        itemModel.endIdx = myTools.clamp(newIdx,0,itemModel.totalLen - 1);
        editor.gameApp.curChain.onUpdateBkp(itemModel);
    }
    changeBkpType(itemView,newBkpType){
        let itemModel = this.getItemModeByView(itemView);
        itemModel.bkpType = newBkpType;

        let bkp = editor.gameApp.curChain.getBkpByItemModel(itemModel);
        bkp.setType(newBkpType);
    }

    deleteItem(itemView){
        // 删除 model
        // 删除 view
        // 删除 ui
        let itemModel = this.getItemModeByView(itemView);
        this.removeItemByView(itemView);
        itemView.destroy();

        let curChain = editor.gameApp.curChain;
        curChain.onRemoveBkp(itemModel);
    }


    changeChain(newChain){

        // 这里没用进行缓存
        // 切换了chain,先暂时存着老的
        for(let i = 0,len = this.lstVms.length; i < len; ++i){
            let itemView = this.lstVms[i].view;
            itemView.destroy();
        }
        this.lstVms.length = 0;

        // 可能新的也已经有了
        let lstbkp = newChain.getBkpList();
        lstbkp.forEach((bkp)=>{
            let itemModel = bkp.getItemModel();
            let newItemView = new BkpItemView();
            this.addView(newItemView);
            this.lstVms.push({
                model:itemModel,
                view:newItemView
            });
            newItemView.updateByModel(itemModel);
        });

        this.updateChainLen(newChain.getTotalLen());
    }

    getItemViewByItemModel(itemMode){
        for(let i = 0,len = this.lstVms.length; i < len; ++i){
            if(this.lstVms[i].model === itemMode){
                return this.lstVms[i].view;
            }
        }
        return  null;
    }
}


module.exports = BkpView;
